import React from "react";
import { log, info, warn, error } from "@/util/tio"
import { useSelector } from "react-redux";
import { selectRoot } from "@/store/rootSlice";

// import { Light as Highlighter } from 'react-syntax-highlighter';
// import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
// import java from 'react-syntax-highlighter/dist/esm/languages/hljs/java';
// import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml';
// import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
// import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
// import { docco, atomOneDark, atomOneLight} from 'react-syntax-highlighter/dist/esm/styles/hljs';

// Highlighter.registerLanguage('javascript', js);
// Highlighter.registerLanguage('xml', xml);
// Highlighter.registerLanguage('json', json);
// Highlighter.registerLanguage('js', js);
// Highlighter.registerLanguage('java', java);

// export let highDark = atomOneDark;
// export let highLight = atomOneLight;

//  ---------------------------------------------------------------------

// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/
import { PrismLight as Highlighter } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import xml from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc';
import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
import { dracula, atomDark, a11yDark, coldarkCold, prism, coy } from 'react-syntax-highlighter/dist/esm/styles/prism';

Highlighter.registerLanguage('jsx', jsx);
Highlighter.registerLanguage('xml', xml);
Highlighter.registerLanguage('json', json);
Highlighter.registerLanguage('javascript', js);
Highlighter.registerLanguage('js', js);
Highlighter.registerLanguage('java', java);

export let highDark = dracula;
export let highLight = prism;

function High({ children, ...rest }) {
    const root = useSelector(selectRoot);

    if (children) {
        return <>
            <Highlighter style={root.theme == 'dark' ? highDark : highLight} {...rest}>
                {children}
            </Highlighter>
        </>
    } else {
        return <></>
    }
}
export default High;